<div class="article-create-container" *ngIf="CVMS.getCurrentView() === viewName">
  <div class="article-group-item">
    <span>标题：</span>
    <div>
      <input nz-input placeholder="请输入文章标题" [(ngModel)]="article.article_title" />
    </div>
  </div>

  <div class="article-group-item">
    <div class="article-group-left">
      <span>类型：</span>
      <div>
        <nz-radio-group [(ngModel)]="article.type">
          <label nz-radio nzValue="1">生活</label>
          <label nz-radio nzValue="2">学习</label>
        </nz-radio-group>
      </div>
    </div>
    <div class="article-group-right">
      <span>标签：</span>
      <div>
        <nz-tag *ngFor="let tag of article.article_categorys;"
                nzMode="closeable"
                (nzOnClose)="handleClose(tag)"
        >
          {{ sliceTagName(tag) }}
        </nz-tag>
        <nz-tag *ngIf="!inputVisible" class="editable-tag" nzNoAnimation (click)="showInput()">
          <i nz-icon nzType="plus"></i>
          New Tag
        </nz-tag>
        <input
          #inputElement
          nz-input
          nzSize="small"
          *ngIf="inputVisible"
          type="text"
          [(ngModel)]="inputValue"
          style="width: 78px;"
          (blur)="handleInputConfirm()"
          (keydown.enter)="handleInputConfirm()"
        />
      </div>
    </div>
  </div>
  <div class="article-group-item preview-img">
    <span>封面图：</span>
    <div>
      <div class="clearfix">
        <nz-upload
          nzListType="picture-card"
          [(nzFileList)]="article.cover_img_url"
          [nzShowButton]="checkedCoverImgLen()"
          [nzPreview]="handlePreview"
          [nzBeforeUpload]="beforeUpload"
          [nzCustomRequest]="handleUpload"
          [nzFileType] = "uploadFileType"
        >
          <div>
            <i nz-icon nzType="plus"></i>
            <div style="margin-top: 8px">Upload</div>
          </div>
        </nz-upload>
        <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible = false">
          <ng-template #modalContent>
            <img [src]="previewImage" [ngStyle]="{ width: '100%' }" />
          </ng-template>
        </nz-modal>
      </div>
    </div>
  </div>

  <div class="article-group-item">
    <span>描述：</span>
    <div>
      <input nz-input placeholder="请输入大致的描述" [(ngModel)]="article.article_des" />
    </div>
  </div>
  <div class="article-group-item">
    <span>内容：</span>
    <div class="content-container">
      <div class="edit-box">
        <textarea nz-input placeholder="请输入文章内容"
                  [nzAutosize]="{ minRows: 18, maxRows: 18 }"
                  [ngModel]="article.article_content"
                  (ngModelChange)="contentChange($event)"
        >
        </textarea>
      </div>
      <div class="show-box" [@showPreviewBox]="isDirty ? 'show' : 'hide'">
        <span [innerHTML]="showText"></span>
      </div>
    </div>
  </div>
  <div class="operation-footer-box">
    <div style="padding-right: 20px;" >
      <button nz-button nzType="default" (click)="goBack()">返回</button>
    </div>
    <div>
      <button nz-button nzType="primary" (click)="createArticle()">发布</button>
    </div>
  </div>
</div>
